<template>
    <app-layout>
        <view class="info">
            <view class="last">账户剩余金额：{{money}}元</view>
            <view v-if="type == 'share'" class="last-info">
                <view v-if="config.cash_max_day > -1">
                    <view v-if="config.surplusCash > 0">今日剩余{{custom_setting.words.cash_money.name}}: <span class="surplus">{{config.surplusCash?config.surplusCash:config.cash_max_day}}元</span></view>
                    <view v-else>今日{{custom_setting.words.cash_money.name}}已用尽</view>
                </view>
                <view v-else>今日{{custom_setting.words.cash_money.name}}无限制</view>
                <view @click="visible = !visible">
                    <button class="show-tip">规则</button>
                </view>
            </view>
            <view class="input-money main-between cross-center">
                <view class="input">
                    <input v-model="moneyInput" type="digit" placeholder-style="color:#cdcdcd"
                           :placeholder="'请输入' + custom_setting.words.cash_money.name"/>
                    <view class="price">￥</view>
                </view>
                <view @click="getMoney" class="all">全部</view>
            </view>
            <view class="about" v-if="type != 'region' && config.min_money > 0 && config.cash_service_charge > 0">
                <view v-if="config.min_money > 0">{{custom_setting.words.cash_money.name}}不能小于{{config.min_money}}元
                </view>
                <view v-if="config.cash_service_charge > 0">
                    {{custom_setting.words.cash.name}}需要加收{{config.cash_service_charge}}%手续费
                </view>
            </view>
        </view>
        <view class="about"
              v-if="type == 'region' && (config.min_money > 0 || config.cash_service_charge > 0 || config.free_cash_min > 0 || config.free_cash_max > 0)">
            <view class="dir-left-nowrap">
                <view>说明：</view>
                <view>
                    <view v-if="config.min_money > 0">金额不能少于￥{{config.min_money}}</view>
                    <view v-if="config.cash_service_charge > 0">提现需要加收{{config.cash_service_charge}}%手续费</view>
                    <view v-if="config.free_cash_max > 0">
                        免手续费提现金额区间为￥{{config.free_cash_min}}~￥{{config.free_cash_max}}
                    </view>
                </view>
            </view>
        </view>
        <view>
            <view class="dir-left-nowrap cross-center cash-type" @click="cashTypeModel = true;inputTypeModel = false">
                <view class="box-grow-1">{{custom_setting.words.cash_type.name}}</view>
                <view class="box-grow-0">{{cashName}}</view>
                <image class="box-grow-0 arrow-image" src="/static/image/icon/arrow-right.png"></image>
            </view>
            <view class="dir-left-nowrap cross-center cash-type" v-if="mark_num === 1 || mark_num === 2" @click="cashTypeModel = true;inputTypeModel = true">
                <view class="box-grow-1">信息填写</view>
                <view class="box-grow-0">{{inputType == 'text' ? '输入账号' : '上传收款码'}}</view>
                <image class="box-grow-0 arrow-image" src="/static/image/icon/arrow-right.png"></image>
            </view>
            <view class="cash-info" v-if="mark_num === 1 || mark_num === 2 || mark_num === 3">
                <view class="content cross-center" v-if="inputType == 'text' || mark_num === 3">
                    <view class="enter" v-if="mark_num === 3">开户人<span>*</span></view>
                    <view class="enter" v-else>姓名<span>*</span></view>
                    <input placeholder-style="color:#cdcdcd" class="info-input" v-model="name" placeholder="请输入正确的姓名"/>
                </view>
                <view class="content cross-center" v-if="mark_num === 3">
                    <view class="enter">开户行<span>*</span></view>
                    <input placeholder-style="color:#cdcdcd" class="info-input" v-model="bank_name"
                           placeholder="请输入正确的银行名称"/>
                </view>
                <view class="content cross-center" v-if="inputType == 'text' || mark_num === 3">
                    <view class="enter">帐号<span>*</span></view>
                    <input placeholder-style="color:#cdcdcd" class="info-input" v-model="mobile" v-if="mark_num === 1"
                           placeholder="请输入正确的微信帐号"/>
                    <input placeholder-style="color:#cdcdcd" class="info-input" v-model="mobile"
                           v-else-if="mark_num === 2"
                           placeholder="请输入正确的支付宝帐号"/>
                    <input placeholder-style="color:#cdcdcd" class="info-input" v-model="mobile"
                           v-else-if="mark_num === 3"
                           type="number" placeholder="请输入正确的银行卡帐号"/>
                </view>
                <view class="content cross-center" v-else-if="inputType == 'code' && mark_num != 3">
                    <view class="enter">收款码<span>*</span></view>
                    <image v-if="codeImg" @click="codeImg=''" class="clear" src="/static/image/icon/clear.png"></image>
                    <image v-if="codeImg" @click="chooseImage" class="img" :src="codeImg"></image>
                    <image v-else @click="chooseImage" class="img" src="./../image/add.png"></image>
                </view>
            </view>
            <view class="submit">
                <button @click="subscribe" >提交申请</button>
            </view>
        </view>
        <app-cash-model
                :type="inputTypeModel ? 'input' : 'cash'"
                :title="inputTypeModel ? '信息填写' : custom_setting.words.cash_type.name"
                :is-auto="pay_type.auto"
                :is-wx="pay_type.wechat"
                :is-alipay="pay_type.alipay"
                :is-bank="pay_type.bank"
                :is-balance="pay_type.balance"
                :pay-type="cashType"
                @change="payTypeChange"
                v-model="cashTypeModel"
        ></app-cash-model>
        <view class="bg" v-if="visible">
            <view class="dialog">
                <view class="dialog-title">提示</view>
                <view class="dialog-msg">
                    今日剩余{{custom_setting.words.cash_money.name}}=平台每日可{{custom_setting.words.cash_money.name}}-今日所有用户{{custom_setting.words.cash_money.name}}
                </view>
                <view class="dialog-btn main-center">
                    <view class="dialog-submit" @click="visible= false">我知道了</view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import uploadFile from "@/core/upload";
    import {mapState} from "vuex";
    import appCashModel from "../../../components/page-component/app-cash-model/app-cash-model";

    export default {
        data() {
            return {
                mch_id: 0,
                type: 'share',
                inputType: 'text',
                codeImg: '',
                inputTypeModel: false,
                visible: false,
                mark_num: -1,
                money: 0,
                name: '',
                bank_name: '',
                mobile: '',
                moneyInput: '',
                pay_type: {
                    auto: false,
                    alipay: false,
                    wechat: false,
                    bank: false,
                    balance: false,
                },
                config: [],
                template_message: [],
                cashTypeModel: false,
                cashType: '',
                loading: false,
            }
        },
        components: {appCashModel},
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                custom_setting: state => state.mallConfig.share_setting_custom,
                share_setting: state => state.mallConfig.share_setting,
            }),
            cashName() {
                switch (this.cashType) {
                    case 'auto':
                        // #ifdef MP-WEIXIN
                        return '微信零钱';
                        // #endif
                        // #ifdef MP-ALIPAY
                        return '支付宝余额';
                        // #endif
                        // #ifndef MP-WEIXIN || MP-ALIPAY
                        return '自动';
                    // #endif
                    case 'wx':
                        return '微信线下打款';
                    case 'alipay':
                        return '支付宝线下打款';
                    case 'bank':
                        return '银联线下打款';
                    case 'balance':
                        return '商城余额';
                    default:
                        return;
                        break;
                }
            },
        },
        methods: {
            // 选择图片
            chooseImage(addIndex) {
                let self = this;
                let {
                    imageList,
                } = self;
                // #ifdef MP
                uni.chooseImage({
                    count: 1,
                    success: function (e) {
                        for (let i in e.tempFilePaths) {
                            // if (i >= (maxNum - imageList.length)) {
                            //     break;
                            // }
                            let fileName = '';
                            // #ifdef MP-BAIDU
                            fileName = e.tempFilePaths[i].substr(e.tempFilePaths[i].lastIndexOf('/') + 1);
                            // #endif
                            uni.uploadFile({
                                url: self.$api.upload.file,
                                filePath: e.tempFilePaths[i],
                                name: 'file',
                                fileType: 'image',
                                formData: {
                                    file: e.tempFilePaths[i],
                                    file_name: fileName,
                                },
                                success(res) {
                                    const data = res.data;
                                    let result = null;
                                    if (typeof data === 'string') {
                                        result = JSON.parse(data);
                                    } else {
                                        result = data;
                                    }
                                    if (result.code == 0) {
                                        self.codeImg = result.data.url;
                                    } else {
                                        uni.showModal({
                                            title: '',
                                            content: result.msg,
                                            showCancel: false,
                                        });
                                    }
                                },
                                fail(e) {
                                    if (e && e.errMsg) {
                                        uni.showModal({
                                            title: '错误',
                                            content: e.errMsg,
                                            showCancel: false,
                                        });
                                    }
                                },
                            });
                        }
                    }
                })
                // #endif

                // #ifdef H5
                uni.chooseImage({
                    count: 1,
                    success: function (e) {
                        for (let i in e.tempFilePaths) {
                            let image = new Image();
                            image.src = e.tempFilePaths[i];
                            image.onload = () => {
                                let canvas = document.createElement("canvas");
                                canvas.width = image.width;
                                canvas.height = image.height;
                                let ctx = canvas.getContext("2d");
                                ctx.drawImage(image, 0, 0, image.width, image.height);
                                let ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
                                let dataURL = canvas.toDataURL("image/" + ext);
                                uploadFile({
                                    url: self.$api.upload.file,
                                    success: function ({res, header}) {
                                        self.$request({
                                            url: self.$api.upload.file + '&name=base64',
                                            header: header,
                                            method: 'post',
                                            data: {
                                                database: dataURL
                                            }
                                        }).then(res => {
                                            if (res.code === 0) {
                                                self.codeImg = res.data.url;
                                            } else {
                                                uni.showModal({
                                                    title: '',
                                                    content: res.msg,
                                                    showCancel: false,
                                                });
                                            }
                                        })
                                    }
                                });
                            };
                        }
                    }
                });
                // #endif
            },
            getMoney() {
                let money = this.config.surplusCash ? this.config.surplusCash : this.config.cash_max_day;
                if (+money < +this.money && +money > -1) {
                    this.moneyInput = +money;
                } else if(this.money > 0) {
                    this.moneyInput = +this.money;
                }
            },

            payTypeChange(value) {
                if(this.inputTypeModel) {
                    this.inputType = value;
                }else {
                    this.cashType = value;
                    let type = this.type == 'mch' ? 'type_data' : 'extra';
                    let name = this.type == 'mch' ? 'nickname' : 'name';
                    let mobile = this.type == 'mch' ? 'account' : 'mobile';
                    switch (value) {
                        case 'auto':
                            this.mark_num = 0;
                            break;
                        case 'wx':
                            this.mark_num = 1;
                            this.inputType = 'text';
                            if(this.config.last_cash_list.wechat && this.config.last_cash_list.wechat.use_qrcode) {
                                this.inputType = 'code';
                                this.codeImg = this.config.last_cash_list.wechat[type].qrcode
                            }else {
                                this.name = this.config.last_cash_list.wechat ? this.config.last_cash_list.wechat[type][name] : ''
                                this.mobile = this.config.last_cash_list.wechat ? this.config.last_cash_list.wechat[type][mobile] : ''
                            }
                            break;
                        case 'alipay':
                            this.mark_num = 2;
                            this.inputType = 'text';
                            if(this.config.last_cash_list.alipay && this.config.last_cash_list.alipay.use_qrcode) {
                                this.inputType = 'code';
                                this.codeImg = this.config.last_cash_list.alipay[type].qrcode
                            }else {
                                this.name = this.config.last_cash_list.alipay ? this.config.last_cash_list.alipay[type][name] : ''
                                this.mobile = this.config.last_cash_list.alipay ? this.config.last_cash_list.alipay[type][mobile] : ''
                            }
                            break;
                        case 'bank':
                            this.mark_num = 3;
                            this.bank_name = this.config.last_cash_list.bank ? this.config.last_cash_list.bank[type].bank_name : ''
                            this.name = this.config.last_cash_list.bank ? this.config.last_cash_list.bank[type][name] : ''
                            this.mobile = this.config.last_cash_list.bank ? this.config.last_cash_list.bank[type][mobile] : ''
                            break;
                        case 'balance':
                            this.mark_num = 4;
                            break;
                        default:
                            this.mark_num = -1;
                            break;
                    }
                }
            },

            subscribe() {
                if (this.mark_num === -1) {
                    uni.showToast({title: '请选择提现方式', icon: 'none'});
                    return;
                }
                if(this.loading) {
                    return false
                }
                this.loading = true;
                this.$subscribe(this.template_message).then(res => {
                    this.submit();
                }).catch(res => {
                    this.submit();
                });
            },
            submit() {
                let that = this;
                uni.showLoading({
                    title: '申请中'
                })
                let url = that.$api.share.cash;
                let getUrl = '/pages/share/cash-detail/cash-detail'
                let para = {
                    price: that.moneyInput,
                    type: 'auto',
                    use_qrcode: 0
                };
                if(that.type == 'mch') {
                    let form = {
                        cash_money: that.moneyInput,
                        account: that.mobile,
                        nickname: that.name,
                        bank_name: that.bank_name,
                        qrcode: that.codeImg
                    }
                    url = that.$api.mch.cash_submit
                    para = {
                        mch_id: that.mch_id,
                        money: that.moneyInput,
                        type: that.cashType,
                        type_data: JSON.stringify(form),
                        use_qrcode: that.inputType == 'text' ? 0 : 1
                    }
                    getUrl = '/plugins/mch/mch/cash-log/cash-log?mch_id=' + that.mch_id
                }else {
                    if(that.type == 'bonus') {
                        url = that.$api.bonus.cash
                        getUrl = '/plugins/bonus/cash-detail/cash-detail'
                    }
                    if(that.type == 'stock') {
                        url = that.$api.stock.cash
                        getUrl = '/plugins/stock/cash-detail/cash-detail'
                    }
                    if(that.type == 'region') {
                        url = that.$api.region.cash
                        getUrl = '/plugins/region/cash-detail/cash-detail'
                    }
                    if (that.mark_num === 4) {
                        para.type = 'balance';
                    } else if (that.mark_num === 0) {
                        para.type = 'auto';
                    } else {
                        para.name = that.name;
                        para.mobile = that.mobile;
                        if(that.inputType == 'code' && that.mark_num != 3) {
                            para.use_qrcode = 1;
                            para.qrcode = that.codeImg;
                            para.name = '';
                            para.mobile = '';
                        }
                        switch (that.mark_num) {
                            case 1:
                                para.type = 'wechat';
                                break;
                            case 2:
                                para.type = 'alipay';
                                break;
                            case 3:
                                para.type = 'bank';
                                para.bank_name = that.bank_name;
                                break;
                        }
                    }
                }
                that.$request({
                    url: url,
                    data: para,
                    method: 'post',
                }).then(response=>{
                    that.loading = false;
                    uni.hideLoading();
                    if(response.code === 0) {
                        uni.showToast({
                            title: response.msg,
                            duration: 1000
                        });
                        setTimeout(() => {
                            uni.redirectTo({
                                url: getUrl
                            });
                        }, 1000);
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    that.loading = false;
                    uni.hideLoading();
                });
            },

            getStatus(url) {
                let that = this;
                let type = this.type == 'bonus' ? 'captain' : this.type
                that.$request({
                    url: url,
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.money = response.data[type].total_bonus ? response.data[type].total_bonus : '0.00';
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            setting() {
                let that = this;
                let para = {
                    url: that.$api.share.setting
                }
                let getUrl = ''
                if(this.type == 'bonus') {
                    para.url = that.$api.bonus.setting
                    getUrl = that.$api.bonus.status
                }
                if(this.type == 'stock') {
                    para.url = that.$api.stock.setting
                    getUrl = that.$api.stock.status
                }
                if(this.type == 'region') {
                    para.url = that.$api.region.setting
                    getUrl = that.$api.region.status
                }
                if(this.type == 'region') {
                    para.url = that.$api.region.setting
                    getUrl = that.$api.region.status
                }
                if(this.type == 'mch') {
                    para.url = that.$api.mch.setting
                    para.data = {
                        mch_id: this.mch_id
                    }
                }
                that.$request(para).then(response=>{
                    that.$hideLoading();
                    if(getUrl) {
                        that.getStatus(getUrl);
                    }
                    if(response.code === 0) {
                        let type = 'pay_type'
                        if(this.type == 'bonus') {
                            that.config = response.data.list;
                            that.template_message = response.data.list.template_message_withdraw;
                        }else if(this.type == 'stock' || this.type == 'region') {
                            that.config = response.data;
                            that.template_message = response.data.template_message_withdraw;
                        }else if(this.type == 'mch') {
                            that.config = response.data.setting;
                            that.template_message = response.data.template_message_list;
                            type = 'cash_type'
                        }else {
                            that.config = response.msg.config;
                            that.template_message = response.msg.template_message
                        }
                        for (let i = 0; i < that.config[type].length; i++) {
                            switch (that.config[type][i]) {
                                case 'auto':
                                    that.pay_type.auto = true;
                                    break;
                                case 'alipay':
                                    that.pay_type.alipay = true;
                                    break;
                                case 'wx':
                                    that.pay_type.wechat = true;
                                    break;
                                case 'wechat':
                                    that.pay_type.wechat = true;
                                    break;
                                case 'balance':
                                    that.pay_type.balance = true;
                                    break;
                                case 'bank':
                                    that.pay_type.bank = true;
                                    break;
                            }
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    that.$hideLoading();
                });
            },
        },

        onLoad(options) { this.$commonLoad.onload(options);
            let that = this;
            if(options.mch_id > 0) {
                this.type = 'mch';
                this.mch_id = options.mch_id
            }else {
                this.type = options.type
            }
            if (options.money > 0) {
                that.money = options.money;
            }
            if(options.type == 'share') {
                uni.setNavigationBarTitle({
                    title: that.custom_setting.menus.cash.name,
                });
            }
            that.setting();
        }
    }
</script>

<style scoped lang="scss">
    .about {
        font-size: #{26rpx};
        padding: #{32rpx} #{24rpx} #{12rpx};
        color: #999;
    }
    .cash-type {
        height: #{105rpx};
        background: white;
        color: #353535;
        font-size: #{32rpx};
        padding: 0 #{24rpx};
        margin: #{24rpx};
        margin-bottom: 0;
        border-radius: 16rpx;

        .arrow-image {
            width: #{12rpx};
            height: #{24rpx};
            display: block;
            margin-left: #{12rpx};
        }
    }


    .button-space {
        height: #{120rpx};
    }

    .cash-info {
        margin: #{20rpx} #{24rpx} #{100rpx};
        background-color: #fff;
        border-radius: 16rpx;
        padding: 0 30rpx 0 198rpx;
        .content {
            position: relative;
            border-bottom: 1rpx solid rgba(0,0,0,.1);
            padding: 30rpx 0;
            &:last-of-type {
                border-bottom: 0;
            }
            .info-input {
                font-size: #{32rpx};
                height: #{45rpx};
            }
            .enter {
                position: absolute;
                left: -168rpx;
                top: 30rpx;
                color: #353535;
                font-size: #{32rpx};
                span {
                    color: #FF4544;
                    margin-left: 5rpx;
                }
            }
            .img {
                width: 120rpx;
                height: 120rpx;
            }
            .clear {
                position: absolute;
                left: 100rpx;
                top: 12rpx;
                width: 36rpx;
                height: 36rpx;
                z-index: 10;
            }
        }
    }

    .info {
        background-color: #fff;
        padding: #{32rpx} #{24rpx} 0;
        color: #353535;
        margin: 20rpx 24rpx 0;
        border-radius: 16rpx;
        &.cash-type {
            margin-bottom: #{20rpx};
            padding: #{32rpx} 0;
            border-bottom: 0;
        }
        .input-money {
            border-top: 1rpx solid rgba(0,0,0,.1);
            margin-top: 30rpx;
            height: 149rpx;
        }
        .last {
            font-size: #{32rpx};
            margin-bottom: #{8rpx};
        }
        .last-info {
            font-size: #{26rpx};
            color: #999999;
            height: #{30rpx};
            .surplus {
                margin: 0 #{5rpx};
            }
            view {
                float: left;
                height: #{30rpx};
                line-height: #{30rpx};
            }
            .show-tip {
                display: inline-block;
                background-color: #fff;
                font-size: #{24rpx};
                padding: 0 #{12rpx};
                height: #{30rpx};
                line-height: #{26rpx};
                border-radius: #{15rpx};
                border: #{1rpx} solid #ff4544;
                color: #ff4544;
                margin-left: #{16rpx};
            }
            button::after {
                border: 0;
            }
        }
    }


    .price {
        height: #{80rpx};
        line-height: #{80rpx};
        font-size: #{64rpx};
        position: absolute;
        left: 0;
        top: 0;
        color: #ff4544;
    }

    .all {
        font-size: 36rpx;
        color: #333333;
    }

    .input {
        font-size: #{36rpx};
        height: #{80rpx};
        line-height: #{80rpx};
        width: 70%;
        padding-left: #{70rpx};
        position: relative;
    }

    .input input {
        height: #{80rpx};
        line-height: #{80rpx};
    }

    .about {
        font-size: #{24rpx};
        padding: #{32rpx} #{24rpx} #{32rpx - 24rpx} #{24rpx};
        color: #666;
    }

    .icon {
        height: #{40rpx};
        width: #{40rpx};
        margin-right: #{16rpx};
        display: flex;
        justify-content: center;
    }

    .mode-item {
        width: #{200rpx};
        border: #{1rpx} solid #999;
        text-align: center;
        padding: 0 #{24rpx};
        height: #{66rpx};
        line-height: #{66rpx};
        border-radius: #{33rpx};
        display: flex;
        align-items: center;
        margin: #{10rpx} #{24rpx};
        font-size: #{30rpx};
        position: relative;
    }

    .mode-title {
        margin-bottom: #{25rpx};
        padding-left: #{24rpx};
        font-size: #{34rpx};
    }

    .on-active {
        height: #{32rpx};
        width: #{32rpx};
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .submit {
        margin-top: #{40rpx};
    }

    .submit button {
        height: #{80rpx};
        border-radius: #{40rpx};
        line-height: #{80rpx};
        width: 90%;
        margin: 0 auto;
        color: #fff;
        font-size: 16px;
        background-color: #ff4544;
    }

    .bg {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, .3);
        z-index: 10;
    }

    .dialog {
        position: fixed;
        top: #{400rpx};
        left: 0;
        right: 0;
        height: #{330rpx};
        width: #{640rpx};
        margin: 0 auto;
        z-index: 21;
        background-color: #fff;
        border-radius: #{20rpx};
        text-align: center;
        font-size: #{30rpx};
    }

    .dialog-title {
        margin: #{40rpx} auto #{35rpx};
    }

    .dialog-msg {
        margin: #{48rpx};
        margin-top: 0;
    }

    .dialog-btn {
        height: #{88rpx};
        width: #{640rpx};
        border-top: #{1rpx} solid #e2e2e2;
        line-height: #{88rpx};
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .dialog-close,.dialog-submit {
        width: 100%;
    }

    .line {
        height: #{44rpx};
        margin-top: #{22rpx};
        width: #{1rpx};
        background-color: #e2e2e2;
    }

    .dialog-submit {
        color: #ff4544;
    }
</style>